<template>
  <div id="box">
    <div class="small">
      <el-table :data="[administrator]" style="width: 100%">
        <el-table-column prop="icon" label="头像" width="200">
          <template #default="scope">
              <img class="imag" :src='"http://192.168.199.11:8001/ShoppingStreet/"+"images"+scope.row.icon' alt="头像" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="adminName" label="用户名" width="180" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="identity" label="管理员" width="180">
          <template #default="scoped">
            {{ identities(scoped.row.identity) }}
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="180">
          <template #default="scoped">
            {{ sexs(scoped.row.sex) }}
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="手机号" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <button class="btn1" @click="showreveamp(scope.row)">修改</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改模态框 -->
      <el-dialog class="mask" v-model="modify" title="修改管理员" width="500" style="font-weight: 600;" center :show-close="false">
        <div class="di1">
          <span class="san1 spn">头像：</span>
          <el-upload class="uploader" action="#" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <el-button class="el-btn" size="small" type="primary"><el-icon><Upload /></el-icon></el-button>
          </el-upload>
        </div>
        <div class="di2">
          <span class="san1">用户名：</span>
          <input class="inp2" type="text" placeholder="请输入用户名" v-model="inp1">
        </div>
        <div class="di3">
          <span class="san1">账户：</span>
          <input class="inp3" type="text" placeholder="请输入账户" v-model="inp2">
        </div>
        <div class="di4">
          <span class="san1">密码：</span>
          <input class="inp4 ipn" type="text" placeholder="请输入密码" v-model="inp3">
        </div>
        <div class="di5">
          <span class="san1">手机号：</span>
          <input class="inp5 ipn" type="text" placeholder="请输入手机号" v-model="inp4">
        </div>
        <div class="di6">
          <span class="san1">性别：</span>
          <el-radio-group v-model="radio3">
            <el-radio value="0" size="small">男</el-radio>
            <el-radio value="1" size="small">女</el-radio>
          </el-radio-group>
        </div>
        <template #footer>
          <div class="dialog-footer1">
            <el-button class="btns1" @click="modifition">保 存</el-button>
            <el-button class="btnss1" @click="canceles">
              取 消
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

const radio3 = ref('');

onMounted(() => {
  administration();
});

// 判断男女
var sexs = function (sexes) {
  if (sexes === '0') {
    return "男";
  } else {
    return "女";
  }
};

// 判断管理员
var identities = function (identit) {
  if (identit === "0") {
    return "管理员";
  } else {
    return "商家";
  }
};

// 调接口
let administrator = ref([]);
let adminid = localStorage.getItem("adminId");

let administration = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/merchant/merchantUser", {
    adminId: Number(adminid)
  }).then((res) => {
    administrator.value = res.data.data;
  });
};

// 修改接口
var modify = ref(false);
var inp1 = ref('');
var inp2 = ref('');
var inp3 = ref('');
var inp4 = ref('');
var id = ref('');
var avatarUrl = ref(''); // 存储头像 URL
var adid = localStorage.getItem("adminId");

var showreveamp = function (row) {
  modify.value = true;
  id.value = row.adid;
  inp1.value = row.adminName;
  inp2.value = row.account;
  inp3.value = row.password;
  inp4.value = row.tel;
  radio3.value = row.sex;
  avatarUrl.value = row.icon; // 存储当前头像 URL
};

var canceles = function () {
  modify.value = false;
  inp1.value = '';
  inp2.value = '';
  inp3.value = '';
  inp4.value = '';
  radio3.value = '';
  avatarUrl.value = '';
};

var modifition = function () {
  axios.defaults.headers.common['token'] = localStorage.getItem("token");
  axios.post("http://192.168.199.11:8001/ShoppingStreet/merchant/updateInformation", {
    adminId: id.value,
    adminName: inp1.value,
    account: inp2.value,
    password: inp3.value,
    tel: inp4.value,
    sex: radio3.value,
    images: avatarUrl.value // 上传头像 URL
  }).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success('修改成功');
      modify.value = false;
      administration();
    } else {
      ElMessage.error('修改失败');
    }
  });
};

// 头像上传成功回调
const handleAvatarSuccess = (response, file) => {
  avatarUrl.value = URL.createObjectURL(file.raw);
};

// 头像上传前的验证
const beforeAvatarUpload = (file) => {
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) {
    ElMessage.error('只允许上传 JPEG、PNG 和 GIF 格式的图片！');
    return false;
  }
  return true;
};
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  #box {
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding-top: 2%;
  }

 .small {
    width: 95%;
    height: 95%;
    background-color: #fff;
    margin: 0 auto;
  }

 .el-table {
    --el-table-border-color: none;
    --el-table-border: 0px solid var(--el-table-border-color);
  }

  :deep(.cell) {
    line-height: 36px;
    text-align: center;
    color: #000;
    border: none;
  }

 .avatar-uploader.el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

 .avatar-uploader.el-upload:hover {
    border-color: var(--el-color-primary);
  }

 .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

 .btn1 {
    color: #FE0202;
    border: none;
    background-color: transparent;
    outline: none;
    cursor:pointer;
  }

  :deep(.mask) {
    width: 27%;
    height: 60%;
    --el-dialog-margin-top: 10%;
    --el-dialog-border-radius: none;
    /* display: flex;
    align-items: center;
    flex-direction: column; */
  }

  input {
    outline: none;
    width: 58%;
    height: 80%;
    background-color: #F4F4F4;
    border: none;
    border-radius: 2px;
    box-sizing: border-box;
    padding-left: 7px;
  }

 .san1 {
    font-weight: 500;
    color: #000;
    cursor:pointer;
  }

 .di1 {
    width: 90%;
    height: 35px;
    margin-left: 52px;
    margin-top: 3%;
    overflow: hidden;
  }

 .di2 {
    width: 90%;
    height: 35px;
    margin-left: 10%;
    margin-top: 3%;
  }

 .di3 {
    width: 90%;
    height: 35px;
    margin-left: 52px;
    margin-top: 3%;
  }

 .di4 {
    width: 85%;
    height: 35px;
    margin-left: 52px;
    margin-top: 3%;
  }

 .ipn {
    width: 200px;
  }

 .di5 {
    width: 85%;
    height: 35px;
    margin-left: 10%;
    margin-top: 3%;
  }

 .di6 {
    width: 85%;
    height: 35px;
    margin-left: 52px;
    margin-top: 3%;
  }

 .dialog-footer1 {
    width: 100%;
    height: 60px;
    margin-top: 2%;
    display: flex;
    justify-content: space-evenly;
  }

 .btns1 {
    width: 25%;
    height: 60%;
    text-align: center;
    line-height: 10px;
    background-color: #5981E1;
    color: #fff;
    font-weight: 600;
  }

 .btnss1 {
    width: 25%;
    height: 60%;
    text-align: center;
    line-height: 10px;
    background-color: #BFBFBF;
    color: #fff;
    font-weight: 600;
  }

  :deep(.el-radio-group) {
    width: 60%;
  }

  :deep(.el-radio__input.is-checked.el-radio__inner) {
    background: #0e0f0f;
    border-color: #080808;
  }

  :deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #080808;
  }

  :deep(.el-radio.el-radio--small) {
    margin-left: 4%;
  }

  :deep(.el-radio:last-child) {
    margin-left: 10%;
  }
  .spn{
    float:left;
    margin-top: 5px;
  }
  :deep(.el-btn){
    float: left;
    width: 40px;
    height:30px;
    background-color: #F4F4F4;
    color: #3B3B3B;
    border: none;
    margin-left: 1px;
    border-radius: 0px;
  }
  .imag{
    border-radius:50%;
  }
</style>